<template>
  <div class="home">
    <div class="header">
      <video autoplay loop muted class="video">
        <source src="../assets/media.mp4" type="video/mp4" />
      </video>
      <div class="header-data">
        <el-row :gutter="20" type="flex" class="header-main">
          <el-col :span="8" v-for="(item, index) in headerData" :key="index">
            <div class="grid-content flex normal" @click="clickHeaderIndex(index)">
              <div class="cn">{{ item.cn }}</div>
              <div class="en">{{ item.en }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18" style="letter-spacing: 5px;">致力于工业互联的自动化数字化智能化集成服务商</el-col>
        </el-row>
      </div>
    </div>
    <main>
      <div>
      <h3 style="margin-bottom:32px">公司四大业务</h3>
        <ul>
          <li>
            <p class="li-cn" style="margin-bottom:16px">
              公司主营四大业务：数字化智能化集成解决方案、人力资源数字化解决方案、大数据治理与可视化和工业互联网应用及网络安全。
            </p>
            <p class="li-en">
              The company's main business: Digital and intelligent integrated solutions,Digital solutions for human resourcesDigital solutions for human resources,Big data governance and visualization and Industrial Internet application and network security.
            </p>
          </li>
        </ul>
      </div>
      <div class="box">
        <img src="../assets/image/HK/worker.png" alt="" />
        <div>
          <h3 class="box-cn">数字化智能化集成解决方案</h3>
          <p class="box-en">Digital and intelligent integrated solutions</p>
          <ul>
            <li v-for="(item, index) in mainData1" :key="index">
              <p class="li-cn">{{ item.cn }}</p>
              <p class="li-en">{{ item.en }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="box" style="align-items:center">
        <div>
          <h3 class="box-cn">人力资源数字化解决方案</h3>
          <p class="box-en">Digital solutions for human resources</p>
          <ul>
            <li v-for="(item, index) in mainData4" :key="index">
              <p class="li-cn">{{ item.cn }}</p>
              <p class="li-en">{{ item.en }}</p>
            </li>
          </ul>
        </div>
        <img src="../assets/image/HK/pic4.jpg" alt="" />
      </div>
      <div class="box" style="align-items:center">
        <img src="../assets/image/HK/pic2.jpg" alt="" />

        <div>
          <h3 class="box-cn">大数据治理与可视化</h3>
          <p class="box-en">Big data governance and visualization</p>
          <ul>
            <li v-for="(item, index) in mainData2" :key="index">
              <p class="li-cn">{{ item.cn }}</p>
              <p class="li-en">{{ item.en }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="box">
        <div>
          <h3 class="box-cn">工业互联网应用及网络安全</h3>
          <p class="box-en">Industrial Internet application and network security</p>
          <ul>
            <li v-for="(item, index) in mainData3" :key="index">
              <p class="li-cn">{{ item.cn }}</p>
              <p class="li-en">{{ item.en }}</p>
            </li>
          </ul>
        </div>
        <img src="../assets/image/HK/pic1.jpg" alt="" />

      </div>
      <!-- <div style="padding:270px 0 80px;">
        <h3 style="color:#3655A5;margin-bottom:50px">合作伙伴 <span class="li-en">Our Partner</span></h3>
        <img src="../assets/image/HK/ourPartener.png" alt="" style="width:100%">
        <div class="logo">
          <img src="../assets/logo/sony.png" alt="" />
          <img src="../assets/logo/tencent.png" alt="" />
          <img src="../assets/logo/linkwell.png" alt="" />
          <img src="../assets/logo/leadcore.png" alt="" />
          <img src="../assets/logo/tecno.png" alt="" />
          <img src="../assets/logo/datangdianxin.png" alt="" />
          <img src="../assets/logo/youwei.png" alt="" />
          <img src="../assets/logo/zhihuishu.png" alt="" />
          <img src="../assets/logo/nestle.png" alt="" />
          <img src="../assets/logo/hongguanxinxi.png" alt="" />
          <img src="../assets/logo/logo1.png" alt="" />
          <img src="../assets/logo/logo2.png" alt="" />
        </div>
      </div> -->
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerData: [
        { cn: "数字化智能化集成解决方案", en: "Digital and intelligent integrated solutions" },
        { cn: "人力资源数字化解决方案", en: "Digital solutions for human resources" },
        {
          cn: "大数据治理与可视化",
          en: "Big data governance and visualization",
        },
        { cn: "工业互联网应用及网络安全", en: "Industrial Internet application and network security" },
      ],
      mainData1: [
        {
          cn: "服务对象：大中型企业、地方政府、产业园区",
          en: "Service targets: large and medium-sized enterprises, local governments, and industrial parks",
        },
        {
          cn: "自有的“三点两线一景”的数字化方法论框架",
          en: 'Our own digital methodology framework of "three points, two lines, and one scene"',
        },
        {
          cn: "提供集生产制造、智慧楼宇园区、营销物流、供应链金融等管控全流程的咨询与规划解决方案",
          en: "Provide consulting and planning solutions that integrate the entire process of production and manufacturing, smart building parks, marketing logistics, supply chain finance, and other control processes",
        },
        {
          cn: "提供数字化、智能化、零碳化管控系统方案",
          en: "Provide digital, intelligent, and zero carbonization control system solutions",
        },
        {
          cn: "提供市场营销商业智能系统方案（含实时大数据分析）",
          en: "Provide marketing business intelligence system solutions (including real-time big data analysis)",
        },
        {
          cn: "面向塔灯工厂、智慧工厂的解决方案",
          en: "Solutions for Tower Light Factory and Smart Factory",
        },
      ],
      mainData2: [
        {
          cn: "服务对象：能源管理、医院、基础设施运维企业",
          en: "Service targets: energy management, hospitals, infrastructure operation and maintenance enterprises",
        },
        {
          cn: "自有的实时非结构化大数据平台和BI分析能力",
          en: "Own real-time unstructured big data platform and BI analysis capabilities",
        },
        {
          cn: "提供大数据可视化BI分析平台及决策系统，以及数据安全系统",
          en: "Provide big data visualization BI analysis platform and decision system, as well as data security system",
        },
        {
          cn: "提供社会基础设施、企业设备云运维及大数据平台",
          en: "Provide social infrastructure, enterprise equipment cloud operation and maintenance, and big data platforms",
        },
        {
          cn: "提供基于数据架构治理、AI工具应用、数据湖等方法论的解决方案，从而实现数据价值化与资产化",
          en: "Provide solutions based on data architecture governance, AI tool application, data lake and other methodologies, so as to realize data value and capitalization",
        },
      ],
      mainData3: [
        {
          cn: "服务对象：制造业企业、基础设施运维企业",
          en: "Service targets: manufacturing enterprises, infrastructure operation and maintenance enterprises",
        },
        {
          cn: "自有的工业互联实施框架，流程引擎，工业区块链技术、低代码开发以及RPA能力",
          en: "Own industrial interconnection implementation framework, process engine, industrial blockchain technology, low code development, and RPA capabilities",
        },
        {
          cn: "提供适用于离散制造、连续制造业MOM平台（含225个模块）",
          en: "Provide MOM platforms suitable for discrete and continuous manufacturing industries (including 225 modules)",
        },
        {
          cn: "工业互联网云MES平台（含线下部署和在线云部署）",
          en: "Industrial Internet cloud MES platform (including offline deployment and online cloud deployment)",
        },
        {
          cn: "工业互联网基础安全及区块链安全",
          en: "Industrial Internet basic security and blockchain security",
        },
        {
          cn: "网络舆情和网络行为实时大数据系统",
          en: "Real time big data system for online public opinion and online behavior",
        },
      ],
      mainData4: [
        {
          cn: "服务对象：人力资源密集型生产企业，服务企业和设计咨询公司，设计院，政府等",
          en: "Service targets: human resource intensive production enterprises, service enterprises and design consulting companies, design institutes, governments, etc",
        },
        {
          cn: "“围绕客户需求”的组织绩效管理，人才供应链和人才生命周期管理",
          en: "Organizational performance management centered around customer needs, talent supply chain, and talent lifecycle management",
        },
        {
          cn: "围绕HR部门和绩效考核部门”的常规管理：组织架构管理，人才画像（心理和行为绩效）人员信息管理，岗位管理，人才考核要素管理",
          en: "Routine management around the HR department and performance evaluation department: organizational structure management, talent portrait (psychological and behavioral performance) personnel information management, job management, and talent evaluation element management",
        },
        {
          cn: "人力资源的员工档案管理系。部门定量&定性考评信息管理和人才发展一体化业务（含数字化招聘）",
          en: "Department of Employee File Management in Human Resources. Integrated business of department quantitative and qualitative evaluation information management and talent development (including digital recruitment)",
        },
      ],
    };
  },
  methods: {
    clickHeaderIndex(index) {
      let element = document.getElementsByClassName('box')[index]
      element.scrollIntoView({ behavior: 'smooth' })
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/font/font.css";

.home {
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/bg1.png");
  background-size: 100% 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  height: calc(100vh - 70px);
  text-align: center;
  color: #fff;
  position: relative;
  background-color: #000;
}

.video {
  width: 100%;
  height: calc(100vh - 70px);
}

.header-data {
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 70px);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #3655A566;
}

.header-main {
  width: 80%;
  margin: 0 auto;
  margin-top: calc(50vh - 150px);
  margin-left: 10% !important;
  margin-right: 10% !important;
  margin-bottom: 100px;
}

.el-col-18 {
  width: 100%;
}


.normal {
  height: 160px;
  opacity: 0.8;
  font-size: 24px;
  border: solid 1px #fff;
  /* font-family: NotoSans; */
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

.normal .en {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 600;
  font-family: bb2331;
}

.normal:hover {
  height: 200px;
  font-size: 26px;
  border: solid 1px #fff;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  position: relative;
  top: -20px;
  transition: all .5s;
}

.normal:hover .en {
  font-size: 18px;
  font-weight: 600;
  font-family: bb2331;
}

.normal:active {
  height: 200px;
  font-size: 32px;
  border: solid 1px #fff;
  background-color: #fff;
  cursor: pointer;
  color: #3655A5FF;
}

.normal:active .en {
  font-size: 18px;
}

main {
  margin: 140px 15%;
}

.box-en {
  color: #8ad3e0;
  font-family: bb2331;
  font-weight: 400;
}

.li-cn {
  font-weight: 400;
}

.li-en {
  color: #999fb3;
  font-family: bb2331;
  font-size: 16px;
  font-weight: 400;
}

ul {
  padding-inline-start: 18px;
  margin-top: 40px;
}

li {
  margin-top: 34px;
  font-size: 16px;
}

h3 {
  margin: 0 0 8px;
  font-size: 32px;
}

p {
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 24px;
}

.box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 210px;
}

.box div {
  width: 50%;
}

main img {
  width: 45%;
}

.logo {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 64px;
  width: auto;
  margin: 0 20px 40px 0;
}</style>
